import React from 'react';
import { Button } from 'antd';
import { Link } from 'umi';
import { connect } from 'dva';

import Todos from './todos/index.js';
import styles from './index.less';

// @connect(
//   ({ todos }) => ({ todos })
// )

//export default class index extends React.Component{
class Index extends React.Component {
    // constructor(props) {
    // 	super(props);
    //  	}
    render() {
        //console.log(this.props.todos);
        return (
            <div>
                {/* 路由之<Link>组件 */}
                <ul className={styles.menu}>
                    <li>
                        <Link to="/users">users</Link>
                    </li>
                    <li>
                        <Link to="/dva">dva</Link>
                    </li>
                    <li>
                        <Link to="/todos">todos</Link>
                    </li>
                </ul>

                {/* 结合使用less */}
                <h1 className={styles.title}>Page index</h1>

                {/* 使用antd */}
                <Button>i am antd button!</Button>

                <div>
                    <button type="button" onClick={this.dealClick.bind(this)}>
                        获取数据
                    </button>
                </div>

                <Todos />
            </div>
        );
    }
    dealClick() {
        //
    }
    componentDidMount() {
        this.props.dispatch({
            //使用了connect props.dispatch自动绑定，dva简化处理了一层
            type: 'todos/getList',
            payload: 100,
        });
    }
}

function mapStateToDispatch(state) {
    const todos = state.todos;

    return {
        todos,
    };
}

export default connect()(Index);
